import { CSSProperties, ref } from 'vue';
import { images_common } from '@/utils/common/utils.ts';
import { requestGet } from '@/utils/request/request.ts';
import { UserPayInfo } from '@/types/user/UserTypes.ts';
import { ElMessage } from 'element-plus';

/**
 * 用户支付相关操作
 */
export const userPay = () => {
  const dialogVisible = ref<boolean>(false);
  const userInfo = ref<UserPayInfo>({
    xm: '', // 姓名
    sfzjh: '', // 身份证件号
    dwmc: '', // 单位名称
    pcmc: '', // 批次名称
    zymc: '', // 培训职业工种
    jfje: 0.0, // 缴费金额
    sjhm: '', // 手机号码
    xb: '', // 性别
    zt: '', // 支付状态
  });
  const bak: CSSProperties = {
    background: 'url(' + images_common('img.png') + ') no-repeat center center',
    backgroundSize: 'cover',
  };
  const query = (val: string) => {
    if (val !== '' && val !== null) {
      requestGet({
        url: '/rest/api/webhook/v1/pay/info',
        params: { sfzh: val },
      })
        .then((res: any) => {
          const { data } = res;
          if (data.state === 200) {
            userInfo.value = data.data;
            dialogVisible.value = true;
          } else {
            ElMessage.error(data.msg);
          }
        })
        .catch(() => {
          ElMessage.error('请求失败！');
        });
    }
  };
  const openPay = (val: string) => {
    requestGet({
      url: '/rest/api/webhook/v1/pay/bill',
      params: {
        sfzh: val,
      },
    })
      .then((res) => {
        const { data } = res;
        if (data.state === 200) {
          window.location.href = data.data;
        } else {
          ElMessage.error(data.msg);
        }
      })
      .catch(() => {});
  };
  return {
    dialogVisible,
    bak,
    userInfo,
    query,
    openPay,
  };
};
